<template>
  <my-dialog :mode="props.mode" title="QR Code Alias" :submit="onOk">
    <q-card-section>
      <div class="q-pa-sm">
        <div class="row q-gutter-y-sm">
          <q-item-label class="col-4 fal"
            >Scan Input:<span style="color: red">*</span></q-item-label
          >
          <div class="col-6 q-my-sm">
            <q-input
              borderless
              v-model="qr_string"
              input-debounce="0"
              hide-bottom-space
              lazy-rules
              class="col-8 fal input-css"
              :dense="true"
            >
            </q-input>
          </div>
          <q-icon
            name="qr_code"
            size="40px"
            color="primary"
            class="cursor-pointer col-2"
            @click="scanDiag = true"
          ></q-icon>
          <q-dialog v-model="scanDiag">
            <OpenCam @submit="(v) => onScan(v)"></OpenCam>
          </q-dialog>
          <q-item-label class="col-4 fal"
            >Stock Code:<span style="color: red">*</span></q-item-label
          >
          <div class="col-8 q-my-sm">
            <q-input
              borderless
              v-model="stock_code"
              input-debounce="0"
              hide-bottom-space
              lazy-rules
              class="col-8 fal input-css"
              :dense="true"
            >
            </q-input>
          </div>
          <q-item-label class="col-4 fal"
            >Serial No:<span style="color: red">*</span></q-item-label
          >
          <div class="col-8 q-my-sm">
            <q-input
              borderless
              v-model="serial_no"
              input-debounce="0"
              hide-bottom-space
              lazy-rules
              class="col-8 fal input-css"
              :dense="true"
            >
            </q-input>
          </div>
        </div>
      </div>
    </q-card-section>
  </my-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import MyDialog from 'src/components/container/MyDialog.vue';
import { useQuasar } from 'quasar';
import OpenCam from 'src/components/OpenCam.vue'

import {
  createQrFormat,
  getQrFormat,
  patchQrFormat,
} from 'src/services/qrMapService';

const props = defineProps<{
  mode: 'create' | 'edit';
  id?: number;
}>();

const scanDiag = ref(false)

const emit = defineEmits(['update']);

const $q = useQuasar();

const qr_string = ref<string>('');
const stock_code = ref<string>('');
const serial_no = ref<string>('');

async function onEdit() {
  const data = {
    qr_string: qr_string.value,
    stock_code: stock_code.value,
    serial_no: serial_no.value,
  };
  try {
    if (props.id) {
      const res = await patchQrFormat(props.id, data);
      if (res) {
        $q.notify({
          message: 'success',
          color: 'positive',
        });
        emit('update');
      }
    }
  } catch (error) {
    console.log(error);
  }
}
function onScan(string: string){
  qr_string.value = string.replace(/\n/g, '').replace(/^ +| +$/g, '').toString()
  scanDiag.value = false
}

async function onCreate() {
  const data = {
    qr_string: qr_string.value,
    stock_code: stock_code.value,
    serial_no: serial_no.value,
  };
  try {
    const res = await createQrFormat(data);
    if (res) {
      $q.notify({
        message: 'success',
        color: 'positive',
      });
      onClear();
      emit('update');
    }
  } catch (error) {
    console.log(error);
  }
}

async function onOk() {
  if (props.mode == 'create') {
    onCreate();
  }
  if (props.mode == 'edit') {
    onEdit();
  }
}

/* watch(
  () => equipmentClass.value + '-' + lv5.value,
  (sum) => {
    if (lv5.value != ''){
      lv5EquipmentClass.value = sum
    }
  }
) */

if (props.mode == 'edit' && props.id) {
  initQrFormat(props.id);
}

async function initQrFormat(id: number) {
  const res = await getQrFormat(id);
  if (res) {
    qr_string.value = res.qr_string;
    stock_code.value = res.stock_code;
    serial_no.value = res.serial_no;
  }
}

function onClear() {
  qr_string.value = '';
  stock_code.value = '';
  serial_no.value = '';
}
</script>
